<template>
  <div class="login">
    <div class="login-content">
        <img
          src="@/assets/logo.png"
          alt=""
        >
        <div class="login-header-title">
          账号密码登陆
        </div>
        <el-form
          ref="formRef"
          :rules="rules"
          :model="state.formState"
        >

          <el-form-item prop="username" 
            :rules="[{required: true, message: '请输入帐户', trigger: 'blur'},{validator: checkUser, trigger: 'blur'}]"
          >
            <el-input
              v-model="state.formState.username"
              class="login-input"
              placeholder="账户"
            />
          </el-form-item>
          <el-form-item prop="password" :rules="[{required: true, message: '请输入帐户', trigger: 'blur'},{validator: checkPassword, trigger: 'blur'}]">
            <el-input
              type="password"
              v-model="state.formState.password"
              class="login-input"
              placeholder="密码"
              @keyup.enter="login"
           />
          </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="login-form-button"
            size="large"
            :loading="loading"
            @click="login"
          >
            登录
          </el-button>
        </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { userLogin } from '@/api/index'
import { errorHandling } from '@/api/error-handling'
const rules = {
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
const state = reactive({
  formState: {
    username: '',
    password: ''
  },
  errorMsg: '',
  visible: false,
  token: '',
})
const loading = ref(false)
const formRef = ref()
const route = useRoute()
const login = async() => {
  await formRef.value.validate()
  loading.value = true
  await errorHandling(userLogin, {...state.formState}, res => {
    localStorage.setItem('token', res.data.token)
    window.location.href = route.query.callBack as string || '/home'
  })
  loading.value = false
}
const checkUser = (rule: any, value: any, callback: any) => {
  // const reg = /^1[34578](\d){9}$/
    const reg = /^.+$/

    if(!reg.test(value)) {
    callback(new Error('请输入正确的帐户'))
  } else{
    callback()
  }
}
const checkPassword = (rule: any, value: any, callback: any) => {
  const reg = /^[a-z0-9A-Z]{6,16}$/
  if(!reg.test(value)) {
    callback(new Error('请输入正确的密码'))
  } else{
    callback()
  }
}

</script>

<style lang="less" scoped>
.login {
  height: 100vh;
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: center;
  background-size: 100% auto;
  background-image: url('https://static.meshcloud.com/img/login-bg.png');
}

.login-content {
  align-self: center;
  width: 465px;
  display: flex;
  flex-direction: column;
  img {
    margin: 0 auto 24px auto;
    width: 80%
  }
}

.login-header-title {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 24px;
}

.login-input {
  height: 40px;
}

.login-form-button {
  width: 100%;
}
:deep(.ant-form-item) {
  margin-bottom: 24px;
}

</style>
